<template>
	<view class="upload-container">
		<u-form id="myForm" :model="form" :border-bottom="false" label-position="left" label-align="center" :label-width="130"
		 :label-style="labelStyle" ref="uForm">
			<u-form-item label="门店名称" class="my-form-item" style="padding-top: 40rpx;">
				<u-input class="my-input" :height="98" v-model="form.storeName" disabled="disabled" type="text" placeholder="请选择"
				 @click="toSearchPage()" />
				<!-- <view v-if="(province.length > 0) && (city.length > 0) && latitude && longitude" class="upload-btn-location" @tap.stop="getNearLocation()">
					<image src="../../static/btn-location.png"></image>
				</view> -->
			</u-form-item>
			<u-form-item v-if="showAddress == true" label="门店地址" class="my-form-item">
				<u-input class="my-input2" :height="98" v-model="form.storeAddress" disabled="disabled" type="text" placeholder="请点击获取"
				 @click="toPickLngAndLat()" />
			</u-form-item>
			<u-form-item v-if="showAddress == true" label="经纬度" class="my-form-item">
				<u-input class="my-input2" :height="98" v-model="lngAndLatStr" disabled="disabled" type="text" placeholder="请点击获取"
				 @click="toPickLngAndLat()" />
			</u-form-item>
			<u-form-item label="视 频" class="my-form-item">
				<view class="upload-video-box">
					<view v-if="myVideoList.length>0" class="view-upload-item" v-for="(item,index) in myVideoList">
						<video :src="(item.url)" :poster="(item.thumb) || ''" class="video" objectFit="fill" :initialTime="0.01"></video>
						<view class="my-video-bg" @tap.stop="showVideoFn(item.url)"></view>
						<image src="../../static/cancel.png" class="cancel-btn" @tap.stop="deleteFileFn(item.fileId, 1)"></image>
					</view>
					<view class="view-upload-btn" @tap.stop="uploadVideoFn()"></view>
				</view>
			</u-form-item>
			<u-form-item label="图 片" class="my-form-item">
				<view class="upload-img-box">
					<view v-if="myImageList.length>0" class="view-upload-item" v-for="(item,index) in myImageList">
						<image :src="item.url" @tap.stop="imgPreview(index)"></image>
						<image src="../../static/cancel.png" class="cancel-btn" @tap.stop="deleteFileFn(item.fileId, 2)"></image>
					</view>
					<view class="view-upload-btn" @tap.stop="uploadImgFn()"></view>
				</view>
			</u-form-item>
			<u-form-item label="备注" class="my-form-item" style="padding-bottom: 172rpx;">
				<u-input v-model="form.remark" type="textarea" class="my-form-textarea" placeholder="请输入备注信息…" :border="false"
				 :height="180" :auto-height="true" />
			</u-form-item>
		</u-form>
		<view v-if="CONFIG.user.id" class="index-btn-upload" @click="submitData()">提交</view>

		<u-picker mode="selector" class="my-u-picker" v-model="show" @confirm="actionSheetCallback" :range="actionSheetList"
		 :z-index="9999" range-key="storeName"></u-picker>

		<view class="show-video-box" v-if="showVideoUrl.length>0" @tap.stop="closeVideoFn()">
			<view class="show-video-box-bd" @tap.stop="closeVideoFn()">
				<video id="myVideo" :src="showVideoUrl" :autoplay="true" controls :show-fullscreen-btn="true" @tap.stop="closeVideoFn()"></video>
				<view class="close-show-video-btn" @tap.stop="closeVideoFn()">返 回</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		<u-line-progress v-if="showULineProgress" :height="28" :striped="true" :percent="currentProgress" :striped-active="true"></u-line-progress>
	</view>
</template>

<script>
	import {
		getPreId,
		getFileList,
		deleteFile,
		getNearByStores,
		editStoreInfo,
		saveXDInfo,
		wxGetTxMapByLatLng
	} from '../../common/service.js'

	export default {
		data() {
			return {
				preId: '', // 新增时，上传多附件，需要先获取预约的记录id
				labelStyle: {
					'height': '98rpx',
					'color': '#666666',
					'font-size': '26rpx',
					'font-family': 'PingFangSC-Regular, PingFang SC',
					'font-weight': '400',
					'display': 'flex',
					'justify-content': 'space-between'
				},
				show: false,
				showAddress: false,
				showULineProgress: false,
				form: {
					storeId: '',
					rp02name: '', // 一级销区
					rp03name: '', // 二级销区
					brand: '', // 品牌
					storeName: '', // 门店名称
					storeAddress: '', // 门店地址
					remark: '', // 备注
					longitude: '', // 经度
					latitude: '' // 纬度
				},
				actionSheetList: [],
				myVideoList: [],
				myImageList: [],
				videoContext: null,
				geocoder: null,
				province: '',
				city: '',
				latitude: null,
				longitude: null,
				showVideoUrl: '',
				currentProgress: 0,
				lngAndLatStr: '',
				isNeedEdit: false, // 是否需要编辑门店信息（地址、经纬度）
				storeItem: null
			};
		},
		onLoad: function(option) {
			const that = this;
			console.log('上传页option:');
			console.log(option);
			that.clearData();
			that.LOGINACTION();
		},
		onShow: function() {
			const pages = getCurrentPages();
			console.log('上传页，获取当前页面栈层数：');
			console.log(pages);
			
			const that = this;
			console.log('onShow-preId:' + that.preId);
			// 经纬度转地址
			// that.geocoder = new qq.maps.Geocoder({
			// 	complete: function(result) {
			// 		console.log('根据经纬度，获取到地址信息:');
			// 		console.log(result);
			// 		that.province = result.detail.addressComponents.province == undefined ? "" : result.detail.addressComponents
			// 			.province;
			// 		that.city = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents.city;
			// 		console.log('省:' + that.province);
			// 		console.log('市:' + that.city);
			// 	}
			// });
			uni.getStorage({
				key: 'storeItem',
				success: function(res) {
					console.log('检测到storeItem：');
					console.log(res.data);
					const storeItem = res.data;
					if (storeItem) {
						that.preId = storeItem.preId || that.preId;
						console.log('检查preId：' + that.preId);
						if (storeItem.isNeedEdit && (storeItem.isNeedEdit === true)) {
							that.isNeedEdit = true;
							that.storeItem = storeItem;
						}
						that.form.storeId = storeItem.id || '';
						that.form.rp02name = storeItem.rp02name || '';
						that.form.rp03name = storeItem.rp03name || '';
						that.form.brand = storeItem.brand || '';
						that.form.storeName = storeItem.storeName || '';
						that.form.storeAddress = storeItem.storeAddress || '';
						if (!that.form.remark) {
							that.form.remark = storeItem.MyRemark || (storeItem.remark || '');
						}
						that.form.longitude = storeItem.longitude || '';
						that.form.latitude = storeItem.latitude || '';
						if (that.form.longitude && that.form.latitude) {
							that.lngAndLatStr = that.form.longitude + ',' + that.form.latitude;
						} else {
							that.lngAndLatStr = '';
						}
						if (that.lngAndLatStr.length == 0) {
							// 经纬度为空，需要展示门店地址、经度、纬度
							that.showAddress = true;
						}
						that.getLocalRes();
					}
				},
				fail: function(e) {
					console.log('检测不到storeItem：');
					console.log(e);
					that.getLocalRes();
				}
			});

		},
		methods: {
			// 经纬度转地址
			getLocInfo(){
				let that = this
				wxGetTxMapByLatLng({"lat":that.latitude,"lng":that.longitude}, (res)=>{
					if(res.data.status=='00000'){
						let result = res.data.data.result
						that.province = result.address_component.province == undefined ? "" : result.address_component.province;
						that.city = result.address_component.city == undefined ? "" : result.address_component.city;
					}else{
						uni.showToast({
							message: res.data.message,
							duration: 2000,
							icon: 'error'
						})
					}
				})
			},
			getLocalRes: function() {
				const that = this;
				if (!that.preId) {
					that.getPreIdFn();
				}
				uni.getStorage({
					key: 'myVideoList',
					success: function(res) {
						console.log('检测到myVideoList：');
						console.log(res.data);
						that.myVideoList = res.data;
						uni.removeStorage({
							key: 'myVideoList',
							success: function(res) {
								console.log('已删除本地myVideoList');
								uni.getStorage({
									key: 'myImageList',
									success: function(res) {
										console.log('检测到myImageList：');
										console.log(res.data);
										that.myImageList = res.data;
										uni.removeStorage({
											key: 'myImageList',
											success: function(res) {
												console.log('已删除本地myImageList');
												that.init();
											}
										});
									},
									fail: function(e) {
										console.log('检测不到myImageList：');
										console.log(e);
										that.init();
									}
								});
							}
						});
					},
					fail: function(e) {
						console.log('检测不到myVideoList：');
						console.log(e);
						uni.getStorage({
							key: 'myImageList',
							success: function(res) {
								console.log('检测到myImageList：');
								console.log(res.data);
								that.myImageList = res.data;
								uni.removeStorage({
									key: 'myImageList',
									success: function(res) {
										console.log('已删除本地myImageList');
										that.init();
									}
								});
							},
							fail: function(e) {
								console.log('检测不到myImageList：');
								console.log(e);
								that.init();
							}
						});
					}
				});
			},
			init: function() {
				const that = this;
				
				// 测试数据：环球国际广场E座 23.026671,113.107250
				// that.latitude = 23.026671;
				// that.longitude = 113.107250;
				// console.log('latitude:' + that.latitude);
				// console.log('longitude:' + that.longitude);
				// const latLng = new qq.maps.LatLng(that.latitude, that.longitude);
				// that.geocoder.getAddress(latLng);
				
				that.INITWXJSDK(that.CONFIG.appid, location.origin + location.pathname + location.search, function() {
					console.log('this.CONFIG:');
					console.log(that.CONFIG);
					that.$wx.getLocation({
						type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							console.log('获取到当前地理位置信息(只有经纬度,省市要另外获取)：');
							console.log(res);
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							console.log('latitude:' + that.latitude);
							console.log('longitude:' + that.longitude);
							// const latLng = new qq.maps.LatLng(that.latitude, that.longitude);
							// that.geocoder.getAddress(latLng);
							that.getLocInfo()
						},
						cancel: function(res) {
							alert('用户拒绝授权获取地理位置');
						}
					});
				}, ['getLocation'])
			},
			showVideoFn(url) {
				const that = this;
				this.showVideoUrl = url;
				setTimeout(function() {
					// 获取 video 上下文 videoContext 对象
					that.videoContext = uni.createVideoContext('myVideo');
					console.log('获取到视频对象:');
					console.log(that.videoContext);
					// 进入全屏状态
					that.videoContext.requestFullScreen();
					// 播放
					that.videoContext.play();
				}, 40)
			},
			closeVideoFn() {
				this.videoContext.exitFullScreen();
				this.showVideoUrl = '';
			},
			imgPreview(idx) {
				const that = this;
				console.log('预览图片:');
				console.log(idx);
				console.log(that.myImageList);
				const list = [];
				that.myImageList.forEach(function(item) {
					list.push(item.url);
				})
				console.log(list);
				// 预览图片
				uni.previewImage({
					current: idx, // uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。
					urls: list
				});
			},
			clearData() {
				this.preId = '';
				this.show = false;
				this.isNeedEdit = false;
				this.storeItem = null;
				this.form = {
					storeId: '',
					rp02name: '', // 一级销区
					rp03name: '', // 二级销区
					brand: '', // 品牌
					storeName: '', // 门店名称
					storeAddress: '', // 门店地址
					remark: '', // 备注
					longitude: '', // 经度
					latitude: '' // 纬度
				};
				this.lngAndLatStr = '';
				this.actionSheetList = [];
				this.myVideoList = [];
				this.myImageList = [];
			},
			clearLocalData(callback) {
				this.removeStorageStoreItem();
				this.removeStorageMyImageList();
				this.removeStorageMyVideoList();
				setTimeout(function() {
					callback();
				}, 40)
			},
			removeStorageStoreItem() {
				uni.getStorage({
					key: 'storeItem',
					success: function(res) {
						uni.removeStorage({
							key: 'storeItem',
							success: function(res) {
								console.log('remove storage storeItem sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('remove storage storeItem fail.');
						console.log(e);
					}
				});
			},
			removeStorageMyImageList() {
				uni.getStorage({
					key: 'myImageList',
					success: function(res) {
						uni.removeStorage({
							key: 'myImageList',
							success: function(res) {
								console.log('remove storage myImageList sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('remove storage myImageList fail.');
						console.log(e);
					}
				});
			},
			removeStorageMyVideoList() {
				uni.getStorage({
					key: 'myVideoList',
					success: function(res) {
						uni.removeStorage({
							key: 'myVideoList',
							success: function(res) {
								console.log('remove storage myVideoList sucess.');
								console.log(res);
							}
						});
					},
					fail: function(e) {
						console.log('remove storage myVideoList fail.');
						console.log(e);
					}
				});
			},
			actionSheetCallback(e) {
				const index = e[0];
				const that = this;
				console.log('选择门店：');
				console.log(e);
				console.log(index);
				const storeItem = that.actionSheetList[index];
				console.log(storeItem);
				that.form.storeId = storeItem.id || '';
				that.form.rp02name = storeItem.rp02name || '';
				that.form.rp03name = storeItem.rp03name || '';
				that.form.brand = storeItem.brand || '';
				that.form.storeName = storeItem.text || storeItem.storeName;
				that.form.storeAddress = storeItem.storeAddress || '';
				that.form.remark = storeItem.MyRemark || '';
				that.form.longitude = storeItem.longitude || '';
				that.form.latitude = storeItem.latitude || '';
				console.log('that.form:');
				console.log(that.form);
				uni.setStorage({
					key: 'storeItem',
					data: storeItem,
					success: function() {
						that.show = false;
						// 判断门店的经纬度有没有, 没有则要展示门店地址、经纬度输入框，点击跳转webView页地图选择补充门店地址、经纬度等信息。
						if ((!storeItem.longitude) && (!storeItem.latitude)) {
							that.showAddress = true;
						}
					}
				});
			},
			toPickLngAndLat() {
				const that = this;
				console.log('查看当前经纬度：');
				console.log(that.longitude);
				console.log(that.latitude);
				uni.setStorage({
					key: 'myVideoList',
					data: that.myVideoList,
					success: function() {
						uni.setStorage({
							key: 'myImageList',
							data: that.myImageList,
							success: function() {
								if (that.longitude && that.latitude) {
									uni.navigateTo({
										url: '../webView/index?lng=' + that.longitude + '&lat=' + that.latitude + '&preId=' + that.preId
									});
								} else {
									that.showToast('获取经纬度失败', 'warning', function() {
										console.log('获取经纬度失败');
										console.log(that.longitude);
										console.log(that.latitude);
									})
								}
							}
						});
					}
				});
			},
			toSearchPage() {
				const that = this;
				uni.setStorage({
					key: 'myVideoList',
					data: that.myVideoList,
					success: function() {
						uni.setStorage({
							key: 'myImageList',
							data: that.myImageList,
							success: function() {
								uni.navigateTo({
									url: '../search/index?remark=' + (that.form.remark || '') + (that.preId ? ('&preId=' +(that.preId || '')) : '') + '&province=' + (that.province || '') + '&city=' + that.city + '&latitude=' + that.latitude + '&longitude=' + that.longitude
								});
							}
						});
					}
				});
			},
			submitFn() {
				const that = this;
				console.log('that.preId:'+that.preId);
				const params = {
					id: that.preId, // 预记录ID
					code: that.CONFIG.user.id || '', // 巡店员工工号
					name: that.CONFIG.user.name || '', // 巡店员工姓名
					firstPictureUrl: that.myImageList[0].url, // 封面图
					isActive: '1',
					lesseeId: '13',
					rp02name: that.form.rp02name || '', // 一级销区名称
					rp03name: that.form.rp03name || '', // 二级销区名称
					brand: that.form.brand || '', // 品牌名称
					storeId: that.form.storeId, // 门店ID
					storeName: that.form.storeName || '', // 门店名称
					storeAddress: that.form.storeAddress || '', // 门店地址
					remark: that.form.remark || '' // 备注
				};
				uni.showLoading({
					title: '提交巡店数据中...',
					mask: true
				});
				// 上传之前，删除myVideoList之外的视频、删除myImageList之外的图片
				that.removeOtherVideo();
				that.removeOtherImage();
				setTimeout(function() {
					saveXDInfo(params, function(success) {
						console.log(success);
						uni.hideLoading();
						that.showToast('提交巡店数据成功', 'success', function() {
							that.clearData();
							
							that.clearLocalData(function() {
								uni.redirectTo({
									url: '../main/index'
								});
							})
						})
					}, function(error) {
						uni.hideLoading();
						that.showToast('提交巡店数据失败', 'error', function() {
							console.log(error);
						})
					});
				}, 80)
			},
			editStoreInfo(storeItem, call) {
				console.log('编辑storeItem:');
				console.log(storeItem);
				const that = this;
				if (!storeItem.latitude) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_latitude:'+(storeItem.latitude || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!storeItem.longitude) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_longitude:'+(storeItem.longitude || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				/* if (!storeItem.storeAddress) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_storeAddress:'+(storeItem.storeAddress || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				} */
				/* if (!storeItem.province) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_province:'+(storeItem.province || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!storeItem.city) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_city:'+(storeItem.city || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!storeItem.area) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_area:'+(storeItem.area || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!storeItem.street) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[edit_street:'+(storeItem.street || '')+']',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				} */
				
				console.log('编辑PC端门店信息（保存经纬度）storeItem:');
				console.log(storeItem);
				const params = {
					id: storeItem.id,
					lesseeId: '13',
					isActive: '1',
					latitude: storeItem.latitude,
					longitude: storeItem.longitude,
					storeAddress: storeItem.storeAddress,
					province: storeItem.province,
					city: storeItem.city,
					area: storeItem.area,
					street: storeItem.street
				}
				// 编辑PC端门店信息（保存经纬度）
				uni.showLoading({
					title: '编辑门店信息数据中...',
					mask: true
				});
				editStoreInfo(params, function(response) {
					uni.hideLoading();
					console.log('编辑门店信息结果:');
					console.log(response);
					if (response.data.code === 200) {
						if (call) {
							call();
						} else {
							that.showToast('编辑门店信息成功！', 'success', function() {
								console.log('编辑门店信息成功！');
							})
						}
					} else {
						that.showToast((response.data.msg || '编辑门店信息数据失败'), 'error', function() {
							console.log((response.data.msg || '编辑门店信息数据失败'));
						})
					}
					
				}, function(error) {
					uni.hideLoading();
					that.showToast('编辑门店信息数据失败', 'error', function() {
						console.log('编辑门店信息数据失败！');
						console.log(error);
					})
				});
			},
			submitData() {
				const that = this;
				if (!that.preId) {
					that.$refs.uToast.show({
						title: 'ID认证未完成，拒绝提交！',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!that.form.storeId) {
					that.$refs.uToast.show({
						title: '请选择1个门店！',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (!that.CONFIG.user.id) {
					that.$refs.uToast.show({
						title: '用户ID认证未完成，拒绝提交',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (that.lngAndLatStr.length === 0) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[lngAndLatStr:0]',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				/* if (that.form.storeAddress.length === 0) {
					that.$refs.uToast.show({
						title: '请先维护门店地址和经纬度[storeAddress:0]',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				} */
				if (that.myImageList.length == 0) {
					that.$refs.uToast.show({
						title: '请上传图片',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (that.myVideoList.length == 0) {
					that.$refs.uToast.show({
						title: '请上传视频',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if (that.isNeedEdit === true) {
					that.editStoreInfo(that.storeItem, function() {
						that.submitFn();
					});
				} else {
					that.submitFn();
				}
			},
			removeOtherVideo() {
				console.log('根据that.preId，删除myVideoList之外的视频');
				const that = this;
				// 获取that.preId下的所有视频，遍历视频，删除myVideoList之外的视频
				const params = {
					// id: '', // 文件记录id，编辑更新时要传，新增时不传
					sourcessId: that.preId, // 业务id (预约记录id)
					sourcessType: '巡店视频', // 业务类型、记录分类
					isActive: '1' // 是否有效
				};
				getFileList(params, function(res) {
					console.log('video-getFileList-success:');
					console.log(res);
					if (res && res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const data = rs.rows;
							if (data.length > 0) {
								console.log('所有视频0:');
								console.log(data);
								console.log('myVideoList0:');
								console.log(that.myVideoList);
								data.forEach(function(item) {
									for (let i = 0; i < that.myVideoList.length; i++) {
										if (item.id == that.myVideoList[i].fileId) {
											item.canNotDelete = true;
											break;
										}
									}
								})
								setTimeout(function() {
									console.log('所有视频1:');
									console.log(data);
									that.toGetDeleteFilesId(data);
								}, 40)
							}
						}
					}
				}, function(e) {
					console.log('video-getFileList-err:');
					console.log(e);
				});
			},
			removeOtherImage() {
				console.log('根据that.preId，删除myImageList之外的图片');
				const that = this;
				// 获取that.preId下的所有图片，遍历图片，删除myImageList之外的图片
				const params = {
					// id: '', // 文件记录id，编辑更新时要传，新增时不传
					sourcessId: that.preId, // 业务id (预约记录id)
					sourcessType: '巡店图片', // 业务类型、记录分类
					isActive: '1' // 是否有效
				};
				getFileList(params, function(res) {
					console.log('video-getFileList-success:');
					console.log(res);
					if (res && res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const data = rs.rows;
							if (data.length > 0) {
								console.log('所有图片0:');
								console.log(data);
								console.log('myImageList0:');
								console.log(that.myImageList);
								data.forEach(function(item) {
									for (let i = 0; i < that.myImageList.length; i++) {
										if (item.id == that.myImageList[i].fileId) {
											item.canNotDelete = true;
											break;
										}
									}
								})
								setTimeout(function() {
									console.log('所有图片1:');
									console.log(data);
									that.toGetDeleteFilesId(data);
								}, 40)
							}
						}
					}
				}, function(e) {
					console.log('video-getFileList-err:');
					console.log(e);
				});
			},
			toGetDeleteFilesId(data) {
				console.log('要查看item是否含有canNotDelete的==============所有文件2:');
				console.log(data);
				let Ids = '';
				const that = this;
				data.forEach(function(item) {
					console.log('查看item是否含有canNotDelete:');
					console.log(item);
					if (!item.canNotDelete) {
						console.log('item不含有canNotDelete:');
						console.log(item);
						Ids = Ids + item.id + ',';
					}
				})
				if (Ids.length > 0) {
					Ids = Ids.substring(0, (Ids.length - 1));
					that.toDeleteOtherFile(Ids);
				}
			},
			toDeleteOtherFile(IdsStr) {
				// deleteFile
				const that = this;
				const params = {};
				params.ids = IdsStr;
				deleteFile(params, function(res) {
					console.log('delete-file-success:');
					console.log(res);
				}, function(e) {
					console.log('delete-file-err:');
					console.log(e);
				})
			},
			showToast(title, type, callback) {
				this.$refs.uToast.show({
					title: title,
					type: type, // primary / success / error / warning / info
					duration: 2000,
					callback: callback
				})
			},
			getPreIdFn() {
				const that = this;
				console.log('this.CONFIG:');
				console.log(this.CONFIG);
				// console.log(request);
				// 多文件上传: 新增记录提交前，获取预定的记录id, 提交时要提交此预定的记录id
				// 接口: /common/getId
				uni.getStorage({
					key: 'storeItem',
					success: function(res) {
						console.log('检测到storeItem：');
						console.log(res.data);
						const storeItem = res.data;
						if (storeItem) {
							if (storeItem.isNeedEdit && (storeItem.isNeedEdit === true)) {
								that.isNeedEdit = true;
								that.storeItem = storeItem;
							}
							that.form.storeId = storeItem.id || '';
							that.form.rp02name = storeItem.rp02name || '';
							that.form.rp03name = storeItem.rp03name || '';
							that.form.brand = storeItem.brand || '';
							that.form.storeName = storeItem.storeName || '';
							that.form.storeAddress = storeItem.storeAddress || '';
							if (!that.form.remark) {
								that.form.remark = storeItem.MyRemark || (storeItem.remark || '');
							}
							that.form.longitude = storeItem.longitude || '';
							that.form.latitude = storeItem.latitude || '';
							if (that.form.longitude && that.form.latitude) {
								that.lngAndLatStr = that.form.longitude + ',' + that.form.latitude;
							} else {
								that.lngAndLatStr = '';
							}
							if (that.lngAndLatStr.length == 0) {
								// 经纬度为空，需要展示门店地址、经度、纬度
								that.showAddress = true;
							}
							if (storeItem.preId) {
								that.preId = storeItem.preId;
								console.log('检查preId：' + that.preId);
							} else {
								getPreId({}, function(res) {
									console.log('getPreId-success:');
									console.log(res);
									if (res && res.statusCode == 200) {
										const rs = res.data;
										if (rs && rs.code == 200) {
											const data = rs.data;
											if (data.id) {
												that.preId = data.id || '';
												console.log('preId:' + that.preId);
											}
										}
									}
								}, function(e) {
									console.log('getPreId-err:');
									console.log(e);
								})
							}
						}
					},
					fail: function(e) {
						console.log('创建preId之前，由于检测不到storeItem，开始创建preId：');
						console.log(e);
						getPreId({}, function(res) {
							console.log('getPreId-success:');
							console.log(res);
							if (res && res.statusCode == 200) {
								const rs = res.data;
								if (rs && rs.code == 200) {
									const data = rs.data;
									if (data.id) {
										that.preId = data.id || '';
										console.log('preId:' + that.preId);
									}
								}
							}
						}, function(e) {
							console.log('getPreId-err:');
							console.log(e);
						})
					}
				});
			},
			uploadVideoFn() {
				const that = this;
				if (!that.preId) {
					that.$refs.uToast.show({
						title: '认证未完成，拒绝上传视频！',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				uni.chooseVideo({
					sourceType: ['album'],
					success: function(res) {
						console.log('选择视频：');
						console.log(res);
						var filePath = res.tempFilePath || ''; // 选定视频的临时文件路径
						var duration = res.duration || 0; // 选定视频的时间长度，单位为 s
						console.log('视频时长:' + duration + 's');
						if (duration > 180) {
							that.$refs.uToast.show({
								title: ('视频时长' + duration + '秒, 超过3分钟！请另选视频！'),
								type: 'warning',
								duration: 5000,
								callback: function() {
									return;
								}
							});
							return;
						}
						var size = (Number(res.size) / 1048576) || 0; // 选定视频的数据量大小, res.size单位为b, size单位为MB
						console.log('视频大小:' + size + 'MB');
						if (size > 50) {
							that.$refs.uToast.show({
								title: ('视频' + size + 'MB, 超过50MB！请另选视频!'),
								type: 'warning',
								duration: 5000,
								callback: function() {
									return;
								}
							});
							return;
						}
						var videoFile = res.tempFile || null;
						if (videoFile) {
							console.log(videoFile);
							var buName = 'xdVideo'; // 自定义上传接口路径
							var fileType = videoFile.type; // 文件类型
							var params = {
								// id: '', // 文件记录id，编辑更新时要传，新增时不传
								sourcessId: that.preId, // 业务id (预约记录id)
								sourcessType: '巡店视频', // 业务类型、记录分类
								createBy: that.CONFIG.user.id, // 创建者(华耐工号)
								// createTime: currentTime, // 创建时间
								// file: videoFile, // 文件
								fileType: fileType, // 文件类型
								// updateBy: '', // 编辑者
								// updateTime: currentTime, // 编辑时间
								isActive: '是' // 是否有效
							};
							uni.showLoading({
								title: '上传中',
								mask: true
							});
							that.showULineProgress = true;
							const uploadTask = uni.uploadFile({
								url: that.CONFIG.api + '/common/upload/' + buName,
								file: videoFile,
								filePath: filePath,
								name: 'file',
								header: {
									Authorization: 'Bearer ' + (that.CONFIG.token || ''),
									lesseeid: that.CONFIG.lesseeid || ''
								},
								formData: params,
								success: (uploadFileRes) => {
									console.log('上传停止:');
									console.log(uploadFileRes);
									if (uploadFileRes.statusCode == 200) {
										let data = uploadFileRes.data;
										console.log(data);
										if (data && typeof(data) == 'string') {
											data = JSON.parse(data);
											console.log(data);
										}
										uni.hideLoading();
										that.showULineProgress = false;
										that.currentProgress = 0;
										if (data.fileId && data.code == 200) {
											const obj = {
												sourcessId: that.preId, // 业务id (预约记录id)
												fileId: data.fileId, // 文件记录id，编辑更新、删除时要传，新增时不传
												fileName: data.fileName,
												url: data.url
											};
											that.myVideoList.push(obj);
										} else {
											console.log('上传失败-----：');
											console.log(data.msg);
											that.$refs.uToast.show({
												title: (data.msg || '上传失败'),
												type: 'error', // primary / success / error / warning / info
												duration: 8000
											})
										}
									}
								}
							});
							uploadTask.onProgressUpdate((res) => {
								that.currentProgress = res.progress;
								console.log('上传进度' + res.progress);
								console.log('已经上传的数据长度' + res.totalBytesSent);
								console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							});
						}
					}
				})
			},
			uploadImgFn() {
				const that = this;
				if (!that.preId) {
					that.$refs.uToast.show({
						title: '认证未完成，拒绝上传图片！',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						console.log('chooseImage:');
						console.log(chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const tempFiles = chooseImageRes.tempFiles;
						var filePath = tempFilePaths[0] || '';
						var imgFile = tempFiles[0] || null;
						if (imgFile) {
							console.log(imgFile);
							var buName = 'xdImg'; // 自定义上传接口路径
							var fileType = imgFile.type; // 文件类型
							var params = {
								// id: '', // 文件记录id，编辑更新时要传，新增时不传
								sourcessId: that.preId, // 业务id (预约记录id)
								sourcessType: '巡店图片', // 业务类型、记录分类
								createBy: that.CONFIG.user.id, // 创建者(华耐工号)
								// createTime: currentTime, // 创建时间
								// file: imgFile, // 文件
								fileType: fileType, // 文件类型
								// updateBy: '', // 编辑者
								// updateTime: currentTime, // 编辑时间
								isActive: '是' // 是否有效
							};
							uni.showLoading({
								title: '上传中',
								mask: true
							});
							that.showULineProgress = true;
							const uploadTask = uni.uploadFile({
								url: that.CONFIG.api + '/common/upload/' + buName,
								file: imgFile,
								filePath: filePath,
								name: 'file',
								header: {
									Authorization: 'Bearer ' + (that.CONFIG.token || ''),
									lesseeid: that.CONFIG.lesseeid || ''
								},
								formData: params,
								success: (uploadFileRes) => {
									console.log('上传停止:');
									console.log(uploadFileRes);
									uni.hideLoading();
									that.showULineProgress = false;
									that.currentProgress = 0;
									if (uploadFileRes.statusCode == 200) {
										let data = uploadFileRes.data;
										console.log(data);
										if (data && typeof(data) == 'string') {
											data = JSON.parse(data);
											console.log(data);
										}
										if (data.fileId && data.code == 200) {
											const obj = {
												sourcessId: that.preId, // 业务id (预约记录id)
												fileId: data.fileId, // 文件记录id，编辑更新、删除时要传，新增时不传
												fileName: data.fileName,
												url: data.url
											};
											that.myImageList.push(obj);
										} else {
											console.log('上传失败-----：');
											console.log(data.msg);
											that.$refs.uToast.show({
												title: (data.msg || '上传失败'),
												type: 'error', // primary / success / error / warning / info
												duration: 8000
											})
										}
									}
								}
							});
							uploadTask.onProgressUpdate((res) => {
								that.currentProgress = res.progress;
								console.log('上传进度' + res.progress);
								console.log('已经上传的数据长度' + res.totalBytesSent);
								console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							});
						}
					}
				});
			},
			deleteFileFn(fileId, type) {
				// deleteFile
				const that = this;
				const params = {};
				params.ids = fileId;
				deleteFile(params, function(res) {
					console.log('delete-file-success:');
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const arr = [];
							if (type == 1) {
								that.myVideoList.forEach(function(item) {
									if (item.fileId !== fileId) {
										arr.push(item);
									}
								})
								that.myVideoList = arr;
							} else {
								that.myImageList.forEach(function(item) {
									if (item.fileId !== fileId) {
										arr.push(item);
									}
								})
								that.myImageList = arr;
							}
						}
					}
				}, function(e) {
					console.log('delete-file-err:');
					console.log(e);
				})
			},
			getNearLocation() {
				console.log('此处获取附近的门店: ');
				const that = this;
				if (!that.CONFIG.user.id) {
					that.$refs.uToast.show({
						title: '认证未完成，拒绝操作',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				if ((!that.province) || (!that.city) || (!that.latitude) || (!that.longitude)) {
					console.log('province:' + that.province);
					console.log('city:' + that.city);
					console.log('latitude:' + that.latitude);
					console.log('longitude:' + that.longitude);
					that.$refs.uToast.show({
						title: '没有查询到定位附近的门店，请手动选择',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				const params = {
					province: that.province,
					city: that.city,
					latitude: that.latitude,
					longitude: that.longitude
				};
				getNearByStores(params, function(res) {
					console.log('获取附近门店:');
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const pointsListRes = rs.data || [];
							that.actionSheetList = [];
							if (pointsListRes) {
								for (const item in pointsListRes) {
									const obj = pointsListRes[item];
									obj.RANGE = item;
									that.actionSheetList.push(obj);
								}
							}
							if (that.actionSheetList.length > 0) {
								that.actionSheetList.forEach(function(item) {
									item.text = item.storeName || '';
								})
							}
							console.log('可选的附近门店:');
							console.log(that.actionSheetList);
							that.show = true;
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '没有查询到定位附近的门店，请手动选择',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						}
					}
				}, function(e) {
					console.log('获取附近门店-error:');
					console.log(e);
					that.$refs.uToast.show({
						title: '没有查询到定位附近的门店，请手动选择',
						type: 'error',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				})
			}
		}
	}
</script>

<style>
	page,
	.upload-container {
		width: 100%;
	}

	.upload-container {
		padding: 20rpx 0 0 0;
		background-color: #F3F5F7;
	}

	#myForm {
		width: 100%;
		height: auto;
		padding-left: 32rpx;
		padding-right: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.my-form-item {
		padding-top: 0;
	}

	.my-input {
		padding-left: 30rpx !important;
		padding-right: 30rpx !important;
		background: #F7F7F7;
		border-radius: 16rpx;
	}

	.my-input2 {
		display: inline-block;
		background-color: #F7F7F7;
		padding-left: 30rpx !important;
		padding-right: 30rpx !important;
		border-radius: 16rpx;
		font-size: 28rpx;
	}

	.upload-btn-location {
		width: 84rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0 16rpx 16rpx 0;
		margin-left: 16rpx;
	}

	.upload-btn-location image {
		width: 21rpx;
		height: 29rpx;
	}

	.upload-video-box,
	.upload-img-box {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.view-upload-item {
		width: 173rpx;
		height: 173rpx;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.view-upload-item .cancel-btn {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		z-index: 10;
	}

	.my-video-bg {
		width: 173rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	}

	.view-upload-item image,
	.view-upload-item video {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.view-upload-btn {
		width: 173rpx;
		height: 173rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		position: relative;
		margin-right: 15rpx;
		margin-top: 20rpx;
	}

	.view-upload-btn::before {
		content: ' ';
		display: block;
		width: 60rpx;
		height: 3rpx;
		background: #D8D8D8;
		border-radius: 3rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -1.5rpx;
		margin-left: -30rpx;
	}

	.view-upload-btn::after {
		content: ' ';
		display: block;
		width: 3rpx;
		height: 60rpx;
		background: #D8D8D8;
		border-radius: 3rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -30rpx;
		margin-left: -1.5rpx;
	}

	.my-form-textarea {
		width: 558rpx;
		background-color: #F7F7F7;
		border-radius: 16rpx;
		padding: 15rpx 30rpx !important;
	}

	.index-btn-upload {
		width: 626rpx;
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		background-image: url(../../static/btn.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		position: fixed;
		left: 62rpx;
		bottom: 0;
		z-index: 30;
	}

	.my-u-picker {
		position: fixed;
		z-index: 99 !important;
	}

	.show-video-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 50;
	}

	.show-video-box-bd {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	/* .show-video-box-bd video {
		width: 100%;
		height: 100%;
	} */

	.show-video-box-bd .close-show-video-btn {
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
		color: rgba(0, 0, 0, .8);
		border-radius: 35rpx;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		z-index: 99999999999999;
	}
</style>
